<template>
  <BezierEdge
    v-bind="options"
    :path="pathParams[0]"
  />

  <foreignObject
    :x="x"
    :y="y"
    width="22"
    height="22"
    style="display: block"
  >
    <ac-icon
      iconId="018ece4f6d31e7c6fec4"
      size="13"
      title="删除"
      @click.stop="removeEdge"
    />
  </foreignObject>
</template>

<script setup>
import { computed, ref } from "vue";
import { BezierEdge, getBezierPath, useVueFlow } from '@vue-flow/core'

const props = defineProps([
  'id', 'sourceNode', 'targetNode', 'source', 'target', 'type',
  'updatable', 'selected', 'animated', 'label', 'labelStyle',
  'labelShowBg', 'labelBgStyle', 'labelBgPadding', 'labelBgBorderRadius',
  'data', 'events', 'style', 'markerStart', 'markerEnd', 'sourceHandleId',
  'targetHandleId', 'interactionWidth', 'sourceX', 'sourceY', 'sourcePosition',
  'targetX', 'targetY', 'targetPosition', 'curvature',
  'path', 'labelX', 'labelY', 'offsetX', 'offsetY'
]);

const { removeEdges } = useVueFlow();

const options = ref({ style: { stroke: '#AFAFAF', strokeWidth: 2, strokeDasharray: '0' } });

const removeEdge = () => {
  removeEdges([props.id])
};

const x = computed(() => {
  return props.sourceX + (props.targetX - props.sourceX) / 2 - 8;
});

const y = computed(() => {
  return props.sourceY + (props.targetY - props.sourceY) /2 - 8;
});

const pathParams = computed(() => getBezierPath(props));
</script>
